<%--
  Created by IntelliJ IDEA.
  User: 张洪瑞
  Date: 2021-6-14  0014
  Time: 上午 10:01:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>广州城市理工学院</title>
    <!-- 引入 layui.css -->
    <!--pageContext.request.contextPath:获取项目的路径 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/loginstyle/css/supersized.css">
    <script src="${pageContext.request.contextPath}/loginstyle/js/jquery-1.8.2.min.js"></script>
    <script src="${pageContext.request.contextPath}/loginstyle/js/supersized.3.2.7.min.js"></script>
    <script src="${pageContext.request.contextPath}/loginstyle/js/supersized-init.js"></script>
  </head>
  <body>
      <div style="width: 400px;height: 450px;background: #FFFFFF;position:absolute;margin-top: 110px;margin-left: 900px;border-radius: 5px;box-shadow: 0px 0px 20px #FFFFFF;">
        <h1 style="color: #0000FF;font-weight: bold;text-align:center;">人事-后台登陆</h1>
        <form class="layui-form layui-form-pane" action="login" id="demo1" style="margin-top: 20px;margin-left: 70px;">
          <div class="layui-form-item">
            <label class="layui-form-label" style="width: 62px;"><i class="layui-icon layui-icon-username" style="font-size: 30px; color: #1E9FFF;font-weight: bold;"></i></label>
            <div class="layui-input-inline">
              <input type="text" name="id" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label" style="width: 62px;"><i class="layui-icon layui-icon-password" style="font-size: 30px; color: #1E9FFF;font-weight: bold;"></i></label>
            <div class="layui-input-inline">
              <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
          </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                <label class="layui-form-label" style="width: 62px;"><i class="layui-icon layui-icon-auz" style="font-size: 30px; color: #1E9FFF;font-weight: bold;"></i></label>
                <div class="layui-input-inline" style="width: 110px;">
                    <input type="text" name="checkcode" lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                </div>
                    <div class="layui-input-inline" style="width: 50px;">
                        <a href="javascript:void(0)" id="checkcode"><img src="${pageContext.request.contextPath}/CheckCodeUtil" alt="" style="width:70px;height: 38px;" id="imgcode"></a>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <button type="submit" class="layui-btn layui-btn-lg" lay-submit="" lay-filter="demo1" style="width: 300px;margin-top: 30px;">登陆</button>
                </div>
            </div>
        </form>
          <!-- 注册按钮在表单的外面，防止注册按钮由于未知原因也能提交表单 -->
          <div class="layui-input-inline" style="margin-left: 69px;">
              <button id="register" class="layui-btn layui-btn-normal layui-btn-lg" data-method="notice" style="width: 300px;">注册</button>
          </div>
          <h4 style="text-align: center;margin-top: 40px;margin-left: 45px;">未来的你，一定会感谢现在努力的自己！！</h4>
      </div>
  </body>
  <script>
      $(function () {
          $('#checkcode').click(function () {
                $('#imgcode').attr('src','${pageContext.request.contextPath}/CheckCodeUtil?time='+new Date().getTime());
          });
          //获取服务器返回的信息
          var loginmsg = "${loginmsg}";
          if (loginmsg != ""){
              layer.msg(loginmsg,{icon:5});//弹出登陆的提示信息
          }
      });
      layui.use(['form','layedit','layer','jquery'], function(){ //独立版的layer无需执行这一句
          var form = layui.form
              ,layedit = layui.layedit
              , layer = layui.layer //独立版的layer无需执行这一句
              ,$ = layui.jquery
          //触发事件
          var active = {
              notice: function(){
              //示范一个公告层
              layer.open({
                  type: 2
                  ,title: '用户注册'
                  ,closeBtn: false
                  ,area: ['460px','470px']
                  ,shade: 0.5
                  ,btn: ['取消']
                  ,btnAlign: 'c'
                  ,moveType: 1 //拖拽模式，0或者1
                  ,content: 'register.jsp'
              });
          },
      };
          $('#register').on('click', function(){   //按钮的点击事件
              var othis = $(this), //获得当前点击的按钮对象othis
              method = othis.data('method');    //获得当前点击对象的data-method绑定的方法名
              active[method] ? active[method].call(this, othis) : '';//调用方法
          });
          //自定义验证规则
          form.verify({
              title: function(value){
                  if(value.length < 5){
                      return '标题至少得5个字符啊';
                  }
              }
              ,pass: [
                  /^[\S]{6,12}$/
                  ,'密码必须6到12位，且不能出现空格'
              ]
              ,content: function(value){
                  layedit.sync(editIndex);
              }
          });
          //监听提交
          form.on('submit(demo1)', function(data){
              // layer.msg(JSON.stringify(data.field));//将表单中的数据显示出来
              return true;
          });
      });
  </script>
</html>
